<!doctype html><html lang="en">
<head>
    <meta charset="UTF-8">
    <title>translate</title>
    <link rel="stylesheet" href="index.css">
    <style>
        .fangshan {
            margin: 100px auto 0 auto;
            width: 200px;
            height: 600px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 1px solid #000;
            position: relative;        }
        #nob1 {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #000;
            position: absolute;
            left: 38%;
            top: 38%;
            z-index: 3;        }
        .nob {
            width: 50px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 78px;
        }
        #nob2 {
                             background: red;
                             transform-origin: 50% bottom;
                             transition: transform 1s linear;
                         }
        #nob3 {

            transform: rotate(240deg);
            left: 75px;
            top: 0px;
            background: green;
            transform-origin: 50% bottom;
            transition: transform 1s linear;
        }
        #nob4 {
            transform: rotate(120deg);
            left: 75px;
            top: 0px;
            background: blue;
            transform-origin: 50% bottom;
            transition: transform 1s linear;
        }
        .shu {            width: 20px;
            height: 300px;
            background: #ccc;
            box-shadow: 2px 0 2px 2px #dedede;
            margin-left: 87px;
            position: relative;
        }
        .pan {
            width: 200px;
            height: 50px;
            border-radius: 50%;
            margin-top: -25px;
            background: #ccc;
        }
        .n {
            position: absolute;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #aaa;
            color: #fff;
            left: 2.5px;
            text-align: center;
            cursor: pointer;
        }
        #n1 {
            top: 50px;
        }
        #n2 {
            top: 80px;
        }
        #n3 {
            top: 110px;
        }
        #n4 {
            top: 140px;
        }    </style>

    <script src="vue.js"></script>
    <!-- import JavaScript -->
    <script src="index.js"></script>
    <script src="axios.min.js"></script>

    <!--end copy-->
</head>
<body>
<div id="app">
<el-container>
    <el-header>除霾机</el-header>
    <el-main>
        <div class="fangshan">
        <div class="box2">
            <div id="nob1"></div>
            <div class="nob" id="nob2"></div>
            <div class="nob" id="nob3"></div>
            <div class="nob" id="nob4"></div>
        </div>
            <div class="block">
                <span class="demonstration">转速</span>
                <el-slider v-model="value1" :change="setSeed()"></el-slider>
            </div>
            <el-button type="primary" @click="setWend()">主要按钮</el-button>
        <!--<div class="shu">-->
        <!--<div class="n" id="n1">1</div>-->
        <!--<div class="n" id="n2">2</div>-->
        <!--<div class="n" id="n3">3</div>-->
        <!--<div class="n" id="n4">关</div>-->
        <!--</div>        <div class="pan"></div>-->
    </div>
    </el-main>
</el-container>
</div>

<script>
    var i=1;
    var interval;
    var app = new Vue({
        el: '#app',
        data: {
            value1: 55
        },
        mounted(){

            this.setSeed()

            //this.getStudentList()
        },
        methods: {
            setSeed() {
                let num=(100-this.value1)*20
                clearInterval(interval)
                change3(num);

                interval= setInterval(function () {
                        change3(num);
                    },
                    num)
            },
            changeSeed(val){
                clearInterval(interval)
                change3(num);
                interval=  setInterval(function () {
                        change3(val);
                    },
                    val)
            }
        }
    })

    function change3(num){
        nob2.style.transform = "rotate("+i*360+"deg)";
        nob2.style.transition = "transform "+num+"ms linear";
        var num2 = i*360+240;
        nob3.style.transform = "rotate("+num2+"deg)";
        nob3.style.transition = "transform "+num+"ms linear";
        var num3 = i*360+120;
        nob4.style.transform = "rotate("+num3+"deg)";
        nob4.style.transition = "transform "+num+"ms linear";
        i++; }
        </script>
    </body>
</html>
